<template>
  <div class="data_details">
    <group class="list_box">
      <cell :title="clubName" :value="clubTime"></cell>
    </group>
    <scroller lock-x scrollbar-y height="65vh" :scroll-bottom-offst="200">
      <div>
        <!-- 表格 -->
        <x-table :cell-bordered="false" style="font-size:13px;background: #fff;">
          <thead>
            <tr>
              <th>局数</th>
              <th v-for="player in detail.players" :key="player.playerid">{{player.nickName}}</th>
              <th>回放</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(round,index) in detail.rounds" :key="index">
              <td>{{round.round}}</td>
              <td v-for="(score,index) in scores[index]" :key="index">{{score.end}}</td>
              <td @click="playback(round.linkkey)">
                <img src="@/images/huifang_icon.png" alt="回放">
              </td>
            </tr>
          </tbody>
        </x-table>
      </div>
    </scroller>
  </div>
</template>

<script>
import { Group, XTextarea, XTable, Alert, Cell, Scroller } from "vux";
import qs from "qs";
export default {
  data() {
    return {
      clubName: "", //亲友圈名称
      clubId: null, //亲友圈Id
      clubTime: "", //对战时间
      detail: [],
      scores: []
    };
  },
  components: {
    Group,
    XTextarea,
    XTable,
    Cell,
    Alert,
    Scroller
  },
  created() {
    //初始化数据
    this.nowDate = this.$route.query.date;
    this.clubId = this.$route.query.clubId;
    this.clubTime = `${this.$route.query.date}(${this.$route.query.time})`;
    this.clubName = this.$route.query.clubName;
    this.getTableData();
  },
  methods: {
    getTableData() {
      this.apiService.club
        .tablestatisticlist({
          date: this.nowDate,
          clubid: this.clubId,
          indexid: this.$route.query.indexid,
          tableid: this.$route.query.tableId
        })
        .then(res => {
          this.detail = res.data;
          let playerid = this.detail.players;
          let score = this.detail.rounds;
          playerid.forEach(p => {
            if (p.nickName.length > 3)
              //处理玩家姓名长度
              p.nickName = p.nickName.substring(0, 3).concat("...");
          });
          score.forEach((s, index) => {
            let arr = [];
            playerid.forEach(p => {
              arr.push(s.scores[p.playerid]);
            });
            this.scores.push(arr);
          });
        });
    },
    playback: function(r) {
      if (r) {
        let url = `http://pb.hbjxqp.happypoker.cn/index.html?key=${r}`;
        window.open(url);
      } else {
        this.showPlugin("敬请期待");
      }
    },
    showPlugin(msg) {
      this.$vux.alert.show({
        title: this.COMPANY_GAME_NAME,
        content: msg
      });
      setTimeout(() => {
        //提示弹框
        this.$vux.alert.hide();
      }, 3000);
    }
  }
};
</script>

<style scoped>
.list_box {
  margin-bottom: 20px;
}
.list_box .weui-cell {
  font-size: 0.25rem;
}
.data_details td img {
  width: 0.5rem;
  vertical-align: middle;
}
</style>
<style>
.data_details .list_box .weui-cell .weui-cell__ft {
  color: #000;
}
.data_details .list_box .weui-cell .vux-label {
  font-size: 0.35rem;
  font-weight: 600;
}
</style>


